<script setup>
	import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
	import { ref } from 'vue'
	import {
		getMerchantListService,
		addMerchantService,
		deleteMerchantService,
	} from '@/api/merchant'

	const drawer = ref(false)
	const title = ref('录入新店铺')
	const btnSave = ref('确认')
	const tableData = ref([])

	const merchantList = async () => {
		let result = await getMerchantListService()
		tableData.value = result.data
	}
	merchantList()

	const form = ref({
		storeName: '',
		storeAddress: '',
		storeCategory: '',
	})
	const clearForm = () => {
		form.value.storeName = ''
		form.value.storeAddress = ''
		form.value.storeCategory = ''
		drawer.value = false
	}
	const handleEdit = (index, row) => {
		ElMessageBox.confirm(`确认删除店铺：${row.storeName}?`)
			.then(async () => {
				await deleteMerchantService(row.id)
				ElNotification({
					title: '删除成功',
					message: `成功删除店铺：${row.storeName}`,
					type: 'success',
				})
				merchantList()
			})
			.catch(() => {
				ElMessage.info('取消删除')
			})
	}
	const addStore = () => {
		drawer.value = true
	}

	const confirmAdd = () => {
		ElMessageBox.confirm(`确定录入新店铺：${form.value.storeName}？`)
			.then(async () => {
				await addMerchantService(form.value)
				ElNotification({
					title: '添加成功',
					message: `成功录入店铺：${form.value.storeName}`,
					type: 'success',
				})
				clearForm()
				merchantList()
			})
			.catch(() => {
				// catch error
			})
	}
</script>

<template>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column label="更新日期" width="300" prop="updateTime">
		</el-table-column>
		<el-table-column label="地址" width="300" prop="storeAddress">
		</el-table-column>
		<el-table-column label="商铺名称" width="300">
			<template #default="scope">
				<el-popover
					effect="light"
					trigger="hover"
					placement="top"
					width="auto">
					<template #default>
						<div>创建时间: {{ scope.row.createTime }}</div>
						<div>
							所属用户ID：{{
								scope.row.merchantId != 0
									? scope.row.merchantId
									: '暂无所属用户'
							}}
						</div>
					</template>
					<template #reference>
						<el-tag>{{ scope.row.storeName }}</el-tag>
					</template>
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column label="类别" width="300" prop="storeCategory">
		</el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button
					size="small"
					type="danger"
					@click="handleEdit(scope.$index, scope.row)">
					删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-button type="primary" :icon="Search" @click="addStore">
		录入新店铺
	</el-button>
	<el-drawer v-model="drawer" direction="ttb" size="50%">
		<template #header>
			<h4>{{ title }}</h4>
		</template>
		<template #default>
			<el-form :model="form" label-width="auto" style="max-width: 600px">
				<el-form-item label="店铺名称">
					<el-input v-model="form.storeName" />
				</el-form-item>
				<el-form-item label="类别">
					<el-input v-model="form.storeCategory" />
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.storeAddress" />
				</el-form-item>
			</el-form>
		</template>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="drawer = false">取消</el-button>
				<el-button type="primary" @click="confirmAdd">
					{{ btnSave }}
				</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<style scoped></style>
